<template>
  <div class="full">
    <div class="flex-container">
      <img src="../assets/四个方块.png" width="35" height="35" />
      <div class="top-title">调度工作台</div>
    </div>
    <div class="container-h1">
      <div class="full-secondtitle-h1">
        <div class="h1">事件概况</div>
      </div>
      <div class="flex-h2" @click="toanaly">
        <div class="h2">数据分析看板</div>
        <img src="../assets/下一步小箭头.png" width="20" height="20" />
      </div>
    </div>
    <div class="box">
      <div class="flex-container">
        <div class="flex-box">
          <img src="../assets/黄灯泡.png" width="64" height="64" />
          <div class="flex-item">
            <!-- 文字 -->
            <div class="clo1">
              <span class="text">待处理</span>
            </div>
            <!-- 数字 -->
            <span class="number">{{ waitnumber }}</span>
          </div>
        </div>
        <div class="flex-box">
          <img src="../assets/黄灯泡.png" width="64" height="64" />
          <div class="flex-item">
            <!-- 文字 -->
            <div class="clo2">
              <span class="text">本月结办</span>
            </div>
            <!-- 数字 -->
            <span class="number">{{ finish }}</span>
          </div>
        </div>
      </div>
    </div>
    <div class="container">
      <div class="full-secondtitle">
        <div class="h1">事件处办队伍</div>
      </div>
    </div>

    <div class="flex-container">
      <div class="flex-item">
        <!-- 数字 -->
        <span class="number">{{ num1 }}0</span>
        <!-- 文字 -->
        <span class="text">{{ text1 }}队伍1名称</span>
      </div>
      <div class="flex-item">
        <!-- 数字 -->
        <span class="number">{{ num2 }}0</span>
        <!-- 文字 -->
        <span class="text">{{ text2 }}队伍2名称</span>
      </div>
      <div class="flex-item">
        <!-- 数字 -->
        <span class="number">{{ num3 }}0</span>
        <!-- 文字 -->
        <span class="text">{{ text3 }}队伍3名称</span>
      </div>
      <div class="flex-item">
        <div>
          <!-- 数字 -->
          <span class="number">{{ num4 }}0</span>
          <!-- 文字 -->
        </div>
        <span class="text">{{ tex4 }}队伍4名称</span>
      </div>
    </div>
    <div class="flex-container-el">
      <el-table
        :data="tableData"
        class="transparent-table"
        header-row-style="background-color: #1a519e60"
      >
        <el-table-column v-slot="{ row }" label="序号" width="60">
          <div class="eltableXH">
            {{ row.index }}
          </div>
        </el-table-column>
        <el-table-column label="类型编号">
          <template #default="{ row }">
            <el-button class="eltablexq" type="text" @click="showDetail(row)">{{
              row.type
            }}</el-button></template
          >
        </el-table-column>
        <el-table-column label="当前状态" width="150">
          <template #default="{ row }">
            <el-tag :type="row.status === '已完结' ? 'success' : 'warning'">
              {{ row.status }}
            </el-tag>
          </template>
        </el-table-column>
      </el-table>
      <el-dialog
        v-model="dialogVisible"
        :style="{
          'background-image': 'url(src/assets/详情背景.png)',
          'background-size': '100% 100%',
          'background-repeat': ' no-repeat',
          'background-color': 'rgba(0, 0, 0, 0)',
          width: '50rem',
          height: '31rem',
          'text-align': 'center',
          top: '5rem',
        }"
      >
        <template #header="{ titleId, titleClass }">
          <div class="my-header">
            <h4 :id="titleId" :class="titleClass" style="color: #ffffff">
              事件详情
            </h4>
          </div>
        </template>
        <div class="swiperbox">
          <div class="swiperboxleft">
            <swiper1 :images="images" class="swiper1" />
          </div>
          <div class="swiperboxright">
            <div>
              <img
                v-if="this.selectedRow.status === '待处理'"
                src="../assets/待处理.png"
                style="width: 5rem; height: 6rem"
                class="swiperbox-img"
              />
              <swiper2 v-else :images="images" class="swiper2" />
            </div>
            <div
              v-if="this.selectedRow.status === '待处理'"
              class="swiperboxstate1"
            >
              <span>待处理</span>
            </div>
            <div v-else class="swiperboxstate2"><span>已完结</span></div>
          </div>
        </div>
        <div class="textbox">
          <div class="textbox-1">
            <div class="textbox-1-1">
              <div class="text-1">事件编号：</div>
              <div class="text-1">事件类型：</div>
              <div class="text-1">事件来源：</div>
              <div class="text-1">事件地址：</div>
              <div class="text-1">事件描述：</div>
              <div class="text-1">创建人：</div>
              <div class="text-1">创建时间：</div>
            </div>
            <div class="textbox-1-2">
              <div class="text-2">事件编号：</div>
              <div class="text-2">事件类型：</div>
              <div class="text-2">事件来源：</div>
              <div class="text-2">事件地址：</div>
              <div class="text-2">事件描述：</div>
              <div class="text-2">创建人：</div>
              <div class="text-2">创建时间：</div>
            </div>
          </div>
          <div class="textbox-3" v-if="this.selectedRow.status === '待处理'">
            <div class="text-5">待处理</div>
            <div class="text-6">处理人：</div>
          </div>
          <div v-else class="textbox-2">
            <div class="textbox-2-1">
              <div class="text-3">处理地址：</div>
              <div class="text-3">处理描述：</div>
              <div class="text-3">处理人：</div>
              <div class="text-3">处理时间：</div>
            </div>

            <div class="textbox-2-2">
              <div class="text-4">
                处理地址：111111111111111111111111111111111111111111111111
              </div>
              <div class="text-4">处理描述：</div>
              <div class="text-4">处理人：</div>
              <div class="text-4">处理时间：</div>
            </div>
          </div>
        </div>

        <!-- 其他详细信息内容 -->
      </el-dialog>
    </div>
  </div>
</template>

<script >
// var chartDom = document.getElementById("main");postall
// var myChart = echarts.init(chartDom);
import * as echarts from "echarts";
import { ref, onMounted, watch } from "vue";
import axios from "axios";
import router from "@/router";
import swiper1 from "../components/swiper1.vue";
import swiper2 from "../components/swiper2.vue";
export default {
  data() {
    return {
      images: [
        { url: "src/assets/地球.png" },
        { url: "src/assets/活动人次.png" },
      ],
      tableData: [
        // 其他数据
      ],
      dialogVisible: false,
      selectedRow: {},
      waitnumber: 0,
      finish: 0,
    };
  },
  components: {
    swiper1,
    swiper2,
  },
  setup() {
    const selectedMonth = ref("");
    const start = ref("");
    const end = ref("");
    const result = ref([]);
    const data = ref([]);
    // 获取数据
    const today = new Date(); // 获取当前日期
    const year = today.getFullYear(); // 获取去年的年份
    const currentMonth = today.getMonth();
    const targetDate1 = new Date(year, currentMonth, 1); // 构造目标日期对象
    const targetDate2 = new Date(year, currentMonth + 1, 0);
    start.value = targetDate1.getTime(); // 获取目标日期的时间戳
    end.value = targetDate2.getTime();
    return {
      selectedMonth,
      start,
      end,
      result,
      data,
    };
  },
  async mounted() {
    const today = new Date(); // 获取当前日期
    const year = today.getFullYear(); // 获取去年的年份
    const currentMonth = today.getMonth();
    const targetDate1 = new Date(year, currentMonth, 1); // 构造目标日期对象
    const targetDate2 = new Date(year, currentMonth + 1, 0);
    this.start = targetDate1.getTime(); // 获取目标日期的时间戳
    this.end = targetDate2.getTime();
    const yearmouth = `${year}-${currentMonth + 1}`;
    console.log("aaa", yearmouth);
    this.mounteda();
    this.mountedb();

    window.showDetail = (row) => {
      // 执行函数逻辑
      console.log(row);
    };
  },
  emits: ["sendData"],
  methods: {
    async mounteda() {
      try {
        const response = await axios.get(
          "http://bolincun.xinpanmen.com:9002/bigscreen_event"
          // {
          //   start: start.value,
          //   end: end.value,
          // }
        );
        console.log("response", response.data);
        const b = [];
        b.push(response.data);
        this.waitnumber = response.data.total - response.data.finish;
        this.finish = response.data.finish;
        const a = b.map((item, index) => {
          return { index: index + 1, type: item.total };
        });
      } catch (error) {
        console.error("Error:", error);
        setTimeout(() => {
          this.mounteda(); // call mounted function again after 1 second
        }, 1000);
      }
    },
    async mountedb() {
      try {
        const things = await axios.get(
          "http://bolincun.xinpanmen.com:9002/bigscreen_list"
          // {
          //   start: start.value,
          //   end: end.value,
          // }
        );
        console.log("things", things.data);
        this.tableData = things.data.map((item, index) => {
          return {
            index: index + 1,
            type: item.ctype,
            status: item.status === 1 ? "未处理" : "已处理",
            name: item.id,
          };
        });
      } catch (error) {
        console.error("Error:", error);
        setTimeout(() => {
          this.mountedb(); // call mounted function again after 1 second
        }, 1000);
      }
    },
    toanaly() {
      this.$emit("sendData", "数据分析看板"); // 触发自定义事件并传递数据
    },
    showDetail(row) {
      this.dialogVisible = true;
      this.selectedRow = row;
      console.log(this.selectedRow);
      window.showDetail(row);
    },
  },
};
</script>
<style scoped>
.full {
  display: flex;
  flex-direction: column;
  width: 25rem;
  /* background-color: #e62f29; */
}
.top-title {
  width: 14rem;
  height: 2.25rem;
  font-size: 2.25rem;

  font-weight: 600;
  color: #ffffff;
  line-height: 2rem;
  background: linear-gradient(0deg, #5677a4 0%, rgb(255, 255, 255) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-left: 1rem;
}
.container {
  display: flex;
  justify-content: space-between;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}
.container-h1 {
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  border: 0.08rem solid rgba(255, 255, 255, 0.575);
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}
.full-secondtitle {
  display: flex;
  align-items: center;
  background-color: #ffffff70;
  padding: 0.3rem 1rem;
}
.full-secondtitle-h1 {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-grow: 1;
  padding: 0.3rem 1rem;
  background-color: #ffffff70;
}
.h1 {
  line-height: 1;
  font-size: 1.4rem;

  font-weight: 600;
  color: #ffffff;
}
.month-selector {
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 0;
  right: 10%;
}
.select1 {
  height: 3rem;
  width: 3.5rem;
  text-align: center;
  font-size: 1.5rem;

  font-weight: 400;
  color: #ffffff;
  line-height: 3rem;
}
.select1 option {
  background-color: transparent;
}
select {
  border-radius: 10px;
  border: 2px solid rgb(0, 255, 255); /* 设置边框宽度和颜色为蓝色 */
  box-shadow: 0 0 20px rgb(0, 208, 255); /* 添加阴影效果 */
  transition: border-color 0.3s, box-shadow 0.3s; /* 添加过渡效果，使改变边框和阴影时平滑过渡 */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  color: #ffffff;
  background-color: transparent;
}
option {
  background-color: transparent;
  color: #000000;
  border: 2px solid rgb(0, 255, 255);
  box-shadow: 0 0 20px rgb(0, 208, 255);
}
select:focus {
  /* color: #000000; */
  outline: none;
}
select::-ms-expand {
  display: none;
}
select::-webkit-outer-spin-button,
select::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.right-top {
  align-self: flex-start; /* 靠右对齐 */
  margin-left: 1rem;
}
.box {
  width: 25rem;
  height: 9rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.flex-container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-grow: 1;
  width: 25rem;
  border: 0.08rem solid rgba(255, 255, 255, 0.575);
  padding: 0.3rem 1rem;
}
.flex-box {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 2rem;
}
.flex-h2 {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  flex-grow: 1;
  padding: 0.3rem 1rem;
}
.h2 {
  line-height: 1;
  font-size: 1.4rem;

  font-weight: 400;
  color: #ffffff;
}
.flex-item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  /* margin: auto; */
  flex-grow: 1;
  flex-basis: 33.33%;
}
.image {
  flex-flow: 1;
}

.number {
  font-size: 2.2rem;

  font-weight: 600;
  color: #f2f1f1;
}
.text {
  font-size: 1.125rem;

  font-weight: 400;
  color: #ffffff;
}
.clo1 {
  width: 5.1rem;
  background-color: #ca25253d;
}
.clo2 {
  width: 6.4rem;
  background: #0a9de13d;
}
.cht1 {
  width: 25rem;
  height: 10rem;
  border: 0.08rem solid rgba(255, 255, 255, 0.575);
}
.cht2 {
  margin-top: -1.2rem;
  width: 24rem;
  height: 6.7rem;
}
.cht3 {
  width: 25rem;
  height: 15rem;
  border: 0.08rem solid rgba(255, 255, 255, 0.575);
}
.chart1 {
  width: 25rem;
  height: 10rem;
}
.chart2 {
  width: 24rem;
  height: 14rem;
}

.chart3 {
  width: 25rem;
  height: 15rem;
}
.flex-container-el {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-grow: 1;
  width: 25rem;
  border: 0.08rem solid rgba(255, 255, 255, 0.575);
  margin-top: 1.5rem;
}
.transparent-table {
  height: 26rem;
}
.el-table {
  --el-table-border-color: transparent;
  --el-table-border: none;
  --el-table-text-color: #ffffff;
  --el-table-header-text-color: #ffffff;
  --el-table-row-hover-bg-color: transparent;
  --el-table-current-row-bg-color: transparent;
  --el-table-header-bg-color: transparent;
  --el-table-bg-color: transparent;
  --el-table-tr-bg-color: transparent;
  --el-table-expanded-cell-bg-color: transparent;
}
.el-tag {
  background-color: transparent;
  font-size: 1rem;
  border-radius: 0.3rem;
}
.eltableXH {
  padding: 0.2rem 0 0 0;
  width: 2.375rem;
  height: 1.875rem;
  background-image: url("../assets/序号.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  text-align: center;
}
.eltablexq {
  color: #ffffff;
}
/* // 修改高亮当前行颜色 */
::v-deep .el-table tbody tr:hover > td {
  background: rgba(0, 255, 255, 0.217) !important;
}
/* 修改表头样式-加边框 */
::v-deep .el-table__header-wrapper {
  border-bottom: 1px solid rgba(255, 255, 255, 0.575);
}
/* 去掉表格里的padding */
::v-deep .el-table .cell,
.el-table th div {
  text-align: center;
  font-size: 1rem;
  overflow: hidden;
  text-overflow: ellipsis;
}
.my-header {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 0 0 0 1rem;
}
.swiperbox {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.swiperboxleft {
  flex-grow: 1;
  width: 23rem;
}
.swiperboxright {
  width: 23rem;
  display: flex;
  flex-direction: row;
}
.swiperbox-img {
  margin-left: 8.5rem;
  margin-top: 2rem;
}
.swiperboxstate1 {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 0.9rem;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #ffffff;
  background-image: url("../assets/stateno.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: 6rem;
  height: 2rem;
  position: absolute;
  top: 5rem;
  right: 2rem;
}
.swiperboxstate2 {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 0.9rem;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #ffffff;
  background-image: url("../assets/state.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: 6rem;
  height: 2rem;
  position: absolute;
  top: 5rem;
  right: 2rem;
}
.textbox {
  display: flex;
  flex-direction: row;
}
.textbox-1 {
  display: flex;
  flex-direction: row;
  width: 9rem;
  flex-grow: 1;
}
.textbox-2 {
  display: flex;
  flex-direction: row;
  width: 9rem;
  flex-grow: 1;
}
.textbox-3 {
  display: flex;
  flex-direction: column;
  width: 9rem;
  flex-grow: 1;
}
.textbox-1-1 {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.textbox-1-2 {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.textbox-2-1 {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.textbox-2-2 {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.text-1 {
  display: flex;
  font-size: 0.9rem;
  font-family: SourceHanSansCN;
  font-weight: 200;
  color: #88a0bf;
  margin-left: 4rem;
}
.text-2 {
  text-align: left;
  color: #ffffff;
  width: 14rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.text-3 {
  display: flex;
  font-size: 0.9rem;
  font-family: SourceHanSansCN;
  font-weight: 200;
  color: #88a0bf;
  margin-left: 5rem;
}
.text-4 {
  text-align: left;
  color: #ffffff;
  width: 14rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.text-5 {
  font-size: 1.5rem;

  font-weight: 400;
  color: #ffffff;
}
.text-6 {
  font-size: 0.9rem;
  font-family: SourceHanSansCN;
  font-weight: 200;
  color: #88a0bf;
}
</style>